<script setup lang="ts">


import {Vue3AutoScroll} from "vue3-auto-scroll";
import dddCloud from '@/components/3d-cloud/index.vue'
import {ref, watch} from "vue";

const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  }
})

const jlt = ref([
  {
    name: '心包经',
    val: 'c0'
  },
  {
    name: '肝经',
    val: 'c1'
  },
  {
    name: '肾经',
    val: 'c2'
  },
  {
    name: '脾经',
    val: 'c3'
  },
  {
    name: '肺经',
    val: 'c4'
  },
  {
    name: '胃经',
    val: 'c5'
  },
  {
    name: '胆经',
    val: 'c6'
  },
  {
    name: '膀胱经',
    val: 'c7'
  }
])

const cloudData = ref<any[]>([])

const extractDetails = (text: string): { type: string; pulse: string } | null => {
  const regex = /\[([^\]]+)]/;
  const regex1 = /（([^)]+)）/;
  const match = text?.match(regex);
  const match1 = text?.match(regex1);

  return { type: match?.[1] || '', pulse: match1?.[1] || ''};
}

const oldLookups = ref()
watch(()=>props.data,(val)=>{
  let lookups:any[] = val?.dirty_dialectic?.lookups || []
  try {
    if(JSON.stringify(oldLookups.value) !== JSON.stringify(lookups)){
      if(lookups?.length && lookups?.[0]?.key != 'Z0022'){
        cloudData.value = lookups.map((v:any)=>({
          name: extractDetails(v.content)?.type
        }))
      }
    }
  }catch (e) {
    
  }
  oldLookups.value = lookups;
},{
  deep:true,
  immediate:true
})

</script>

<template>
<div class="flex flex-shrink-0 mt-[20px]">
  <div>
    <div class="flex items-center ml-[40px]">
      <img class="w-[16px] h-[16px]" src="@/assets/img/icon/5.png" alt="">
      <span class="text-[14px] text-[#4D4D4D] ml-[4px] font-medium">体质辨证</span>
    </div>
    <div class="flex items-center ml-[51px] mt-[30px]">
      <img class="w-[98px] h-[123px]" src="@/assets/img/rt/25.png">
      <div class="ml-[23px] flex flex-col items-center">
        <div class="text-[26px] text-[#FB2D19] ff-YouSheBiaoTiHei w-[80px] text-center leading-[22px]">{{ extractDetails(data?.physical_dialectics?.lookups[0]?.content)?.type }}</div>
        <div class="text-[14px] text-[#1A1A1A]">({{ extractDetails(data?.physical_dialectics?.lookups[0]?.content)?.pulse }})</div>
      </div>
    </div>
    <div class="flex items-center w-[216px] h-[44px] ml-[40px] mt-[27px] px-[4px] bg1">
      <img class="w-[22px] h-[22px] mr-[4px]" src="@/assets/img/icon/19.png">
      <div class="text-[10px] text-[#4D4D4D] flex-1 leading-[12px]">此次测量的体质是您的瞬间体质，如果想要更加了解您的体质，请查看手机端周报告、月报告。</div>
    </div>
  </div>
  <div class="overflow-visible ml-[32px]">
    <div class="flex justify-between">
      <div class="flex items-center">
        <img class="w-[16px] h-[16px]" src="@/assets/img/icon/5.png" alt="">
        <span class="text-[14px] text-[#4D4D4D] ml-[4px] font-medium">经络图</span>
      </div>
      <div class="flex items-center">
        <div class="text-[10px] text-[#808080] flex items-center">数据越接近<div class="w-[8px] h-[8px] bg-[#4D4D4D] mx-[2px]"></div>越健康</div>
        <div class="flex items-center ml-[16px]">
          <div class="flex items-center">
            <div class="w-[8px] h-[8px] bg-[#FB2D19] mr-[5px]"></div>
            <div class="text-[12px] text-[#4D4D4D]">高</div>
          </div>
          <div class="flex items-center ml-[10px]">
            <div class="w-[8px] h-[8px] bg-[#FC7916] mr-[5px]"></div>
            <div class="text-[12px] text-[#4D4D4D]">低</div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex items-center mt-[12px] overflow-visible">
      <div class="flex overflow-visible">
        <div class="w-[32px] h-[160px] flex flex-col items-center justify-center bg-[#ECECEC] overflow-visible ml-[3px]" v-for="(item,i) in jlt" :key="i">
          <div class="flex-1 w-[100%] flex flex-col-reverse items-center overflow-visible">
            <div class="w-[100%] bg-t relative overflow-visible" :style="{
              height: `${Math.abs(data?.meridian_bar_chart?.meridian_value[item.val])}%`
            }"  v-if="data?.meridian_bar_chart?.meridian_value[item.val] > 0">
              <div class="text-[12px] text-[#1A1A1A] font-medium w-[100%] text-center absolute top-[0%] translate-y-[-100%]">{{ data?.meridian_bar_chart?.meridian_value[item.val] }}%</div>
            </div>
          </div>
          <div class="flex w-[32px] h-[16px] text-[10px] text-[#fff] bg-[#4D4D4D] justify-center items-center rounded-[2px]">
            {{ item.name }}</div>
          <div class="flex-1 w-[100%] flex flex-col items-center overflow-visible">
            <div class="w-[100%] bg-b relative overflow-visible" :style="{
              height: `${Math.abs(data?.meridian_bar_chart?.meridian_value[item.val])}%`
            }" v-if="data?.meridian_bar_chart?.meridian_value[item.val] < 0">
              <div class="text-[12px] text-[#1A1A1A] font-medium w-[100%] text-center absolute bottom-[0%] translate-y-[100%]">{{ data?.meridian_bar_chart?.meridian_value[item.val] }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex items-center w-[280px] h-[44px] mt-[8px] px-[4px] bg2">
      <img class="w-[22px] h-[22px] mr-[4px]" src="@/assets/img/icon/19.png">
      <div class="overflow-hidden w-[90%] h-[35px]">
        <vue3-auto-scroll :speed="0.1" :backSpeed="200">
          <div class="text-[10px] text-[#4D4D4D] leading-[12px]">人体的气血时刻在变化，多次测量略有波动属于人体正常现象，肾经、膀胱经一般变化较大，脾经、肺经变化较小。在短时间内、并且心率波动不大的情况下，经络值偏差一般不超过正负10%。</div>
        </vue3-auto-scroll>
      </div>
    </div>
  </div>
  <div class="flex-1 ml-[32px] pr-[51px] overflow-visible">
    <div class="flex items-center">
      <img class="w-[16px] h-[16px]" src="@/assets/img/icon/5.png" alt="">
      <span class="text-[14px] text-[#4D4D4D] ml-[4px] font-medium">脏腑辨证</span>
    </div>
    <div class="h-[225px] overflow-visible">
      <ddd-cloud v-if="cloudData.length" :data="cloudData"/>
      <div v-else class="flex flex-col items-center mt-[11px]">
        <img class="w-[153px] h-[162px]" src="@/assets/img/rt/27.png">
        <div class="text-[18px] text-[#FB2D19] mt-[17px] font-medium">恭喜您, 脏腑功能良好</div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.bg1{
  background: url("@/assets/img/icon/29.png") 0 0 / 100% 100% no-repeat;
}
.bg2{
  background: url("@/assets/img/icon/30.png") 0 0 / 100% 100% no-repeat;
}

.bg-t{
  background: linear-gradient( 180deg, #FB2D19 0%, rgba(251,45,25,0) 100%);
}

.bg-b{
  background: linear-gradient(rgba(252,121,22,0) 0%, #FC7916 100%);
}
</style>
